<template>
  <el-dialog :model-value="true" title="库位信息" width="350px" @close="$emit('close')">
    <div>
      <h4>库位属性</h4>
      <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="排">{{ slotData.row }}</el-descriptions-item>
        <el-descriptions-item label="列">{{ slotData.column }}</el-descriptions-item>
        <el-descriptions-item label="层">{{ slotData.level }}</el-descriptions-item>
        <el-descriptions-item label="长(m)">{{ slotData.length }}</el-descriptions-item>
        <el-descriptions-item label="宽(m)">{{ slotData.width }}</el-descriptions-item>
        <el-descriptions-item label="高(m)">{{ slotData.height }}</el-descriptions-item>
        <el-descriptions-item label="承重(kg)">{{ slotData.maxLoad }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ statusText[slotData.status] }}</el-descriptions-item>
      </el-descriptions>
      <h4 style="margin-top:16px;">物料信息</h4>
      <div v-if="slotData.material">
        <el-descriptions :column="1" border size="small">
          <el-descriptions-item label="物料名称">{{ slotData.material.name }}</el-descriptions-item>
          <el-descriptions-item label="数量">{{ slotData.material.qty }}</el-descriptions-item>
          <el-descriptions-item label="托盘号" v-if="slotData.material.pallet">{{ slotData.material.pallet }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div v-else style="color: #888;">无物料</div>
    </div>
    <template #footer>
      <el-button @click="$emit('close')">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
const props = defineProps(['slotData'])
const statusText = {
  empty: '空库位',
  occupied: '已占用',
  reserved: '预留'
}
</script> 